<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2023/10/10
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>盘点审核</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-table
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                show-overflow-tooltip
                prop="invenid"
                label="盘点id"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="invenstaffName"
                label="盘点员"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="inventime"
                label="盘点时间"
        >
        </el-table-column>
        <el-table-column
                label="审核状态"
        >
            <template slot-scope="scope">
                <el-tag
                        :key="tagItem[scope.$index].label"
                        :type="tagItem[scope.$index].type"
                        effect="dark">
                    {{ tagItem[scope.$index].label }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="branchname"
                label="所属分店"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="branchid"
                label="所属分店编号"
        >
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="detailDialog(scope.row)">详细信息</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="Pass(scope.row)" v-if="scope.row.state==1">通过</el-button>
                <el-button type="danger" size="mini" @click="rejectDialog(scope.row)" v-if="scope.row.state==1">驳回</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--详细信息的对话框
     visible.sync：控制对话框的显示true和隐藏false
 -->
    <el-dialog
            title="详细信息"
            :visible.sync="dialogVisible"
            width="40%"
    >

        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailTable"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="lid"
                    label="报损详情id"
            >
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名称"
            >
            </el-table-column>
            <el-table-column
                    prop="invennum"
                    label="盘点数量"
            >
            </el-table-column>
            <el-table-column
                    prop="lossnum"
                    label="报损数量"
            >
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>


    <!--驳回的对话框
     visible.sync：控制对话框的显示true和隐藏false
 -->
    <el-dialog
            title="驳回"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="rejectDialogClose"
    >

        <el-form ref="rejectDetailFrom" :model="rejectDetailFrom" label-width="80px">
            <el-form-item label="驳回理由" prop="remarks" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="rejectDetailFrom.remarks" placeholder="请输入驳回理由"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmReject('rejectDetailFrom')">确 定</el-button>
                <el-button @click="rejectDialogClose">取 消</el-button>
              </span>
    </el-dialog>


</div>


<script>

    let app = new Vue({
        el: "#app",
        data: {
            //分页数据
            currentPage: 1,
            pageSize: 5,
            total: null,
            //详细信息里的分页数据
            currentPage2: 1,
            pageSize2: 5,
            total2: null,
            //表格数据
            tableData: [],
            //控制弹出对话框
            dialogVisible: false,
            dialogVisible2: false,
            //添加表单对象
            addForm: {},

            //审核状态的标签
            tagItem: [],

            //详细信息的表格数据
            detailTable: [],
            //通过时获取
            detailTable2: [],
            //详细信息的盘点id
            detailinvenid: "",

            //驳回填入的信息
            rejectDetailFrom: {},


        },
        created() {
            this.initTable();
        },
        methods: {
            initTable() {
                axios.get("/inventory/findAllInventory?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                    this.initTag()

                })
            },
            //标签数组初始化
            initTag() {
                for (let x of this.tableData) {
                    switch (x.state) {
                        case 1:
                            let obj1 = {
                                type: "warning",
                                label: "待审核"
                            }
                            this.tagItem.push(obj1)
                            break;
                        case 2:
                            let obj2 = {
                                type: "success",
                                label: "审核通过"
                            }
                            this.tagItem.push(obj2)
                            break;
                        case 3:
                            let obj3 = {
                                type: "danger",
                                label: "审核驳回"
                            }
                            this.tagItem.push(obj3)
                            break;
                    }
                }
            },
            //主表的分页操作
            handleSizeChange(val) {
                this.pageSize = val
                this.initTable()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.initTable()
            },

            //详细信息表的分页操作
            handleSizeChange2(val) {
                this.pageSize2 = val
                this.getDetailTable()
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val
                this.getDetailTable()
            },


            //详细信息按钮事件
            detailDialog(val) {
                this.dialogVisible = true;
                this.detailinvenid = val.invenid
                this.getDetailTable()

            },
            //详细信息表格获取数据
            getDetailTable() {
                axios.get("/inventory/findInventoryGoodsByInventoryID?currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2 + "&invenid=" + this.detailinvenid).then(resp => {
                    this.detailTable = resp.data.data.list
                    this.total2 = resp.data.data.total
                })
            },


            //通过按钮事件
            Pass(val) {

                axios.get("/inventory/findInventoryGoodsByInventoryID?currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2 + "&invenid=" + val.invenid).then(resp => {
                    this.detailTable2 = resp.data.data.list

                    //修改商品数量
                    axios.post("/inventory/updPassCount", this.detailTable2).then(resp => {

                    })

                    //修改审核员、时间和状态
                    axios.post("/inventory/addPass", val).then(resp => {
                        //刷新页面
                        location.reload();
                    })
                })



            },


            //驳回按钮事件
            rejectDialog(val) {
                this.dialogVisible2 = true;
                this.rejectDetailFrom = val;
            },
            //确认驳回按钮事件
            confirmReject(rejectDetailFrom) {

                // axios.post("/inventory/addReject", this.rejectDetailFrom).then(resp => {
                //     //刷新页面
                //     location.reload();
                // })

                //通过validate 判断所填内容是否为空
                this.$refs[rejectDetailFrom].validate((valid) => {
                    if (valid) {
                        axios.post("/inventory/addReject", this.rejectDetailFrom).then(resp => {
                            //刷新页面
                            location.reload();
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            //驳回关闭事件
            rejectDialogClose() {
                this.dialogVisible2 = false
                this.rejectDetail = ""
            }


        }
    })


</script>

</body>
</html>
